Menu multinivel

[perris]

Buenos dias, tengo un problema tengo un menu multinivel vertical, el lio es que cuando abro un submenu tambien me queda abierto el que antes habia usado, la idea es que cuando abra otro submenu me cierre automaticamente el anterior visitado. dejo el codigo si me pueden ayudar. si alguien quiere le envio todo por correo las imagenes y el codigo completo.

EL JS

Código:

function SDMenu(id) {
	if (!document.getElementById || !document.getElementsByTagName)
		return false;
	this.menu = document.getElementById(id);
	this.submenus = this.menu.getElementsByTagName("div");
	this.remember = true;
	this.speed = 4;
	this.markCurrent = true;
	this.oneSmOnly = false;
}
SDMenu.prototype.init = function() {
	var mainInstance = this;
	for (var i = 0; i < this.submenus.length; i++)
		this.submenus[i].getElementsByTagName("span")[0].onclick = function() {
			mainInstance.toggleMenu(this.parentNode);
		};
	if (this.markCurrent) {
		var links = this.menu.getElementsByTagName("a");
		for (var i = 0; i < links.length; i++)
			if (links[i].href == document.location.href) {
				links[i].className = "current";
				break;
			}
	}
	if (this.remember) {
		var regex = new RegExp("sdmenu_" + encodeURIComponent(this.menu.id) + "=([01]+)");
		var match = regex.exec(document.cookie);
		if (match) {
			var states = match[1].split("");
			for (var i = 0; i < states.length; i++)
				this.submenus[i].className = (states[i] == 0 ? "collapsed" : "");
		}
	}
};
SDMenu.prototype.toggleMenu = function(submenu) {
	if (submenu.className == "collapsed")
		this.expandMenu(submenu);
	else
		this.collapseMenu(submenu);
		
};
SDMenu.prototype.expandMenu = function(submenu) {
	var fullHeight = submenu.getElementsByTagName("span")[0].offsetHeight;
	var links = submenu.getElementsByTagName("a");
	for (var i = 0; i < links.length; i++)
		fullHeight += links[i].offsetHeight;
	var moveBy = Math.round(this.speed * links.length);
	
	var mainInstance = this;
	var intId = setInterval(function() {
		var curHeight = submenu.offsetHeight;
		var newHeight = curHeight + moveBy;
		if (newHeight < fullHeight)
			submenu.style.height = newHeight + "px";
		else {
			clearInterval(intId);
			submenu.style.height = "";
			submenu.className = "";
			mainInstance.memorize();
		}
	}, 30);
	this.collapseOthers(submenu);
};
SDMenu.prototype.collapseMenu = function(submenu) {
	var minHeight = submenu.getElementsByTagName("span")[0].offsetHeight;
	var moveBy = Math.round(this.speed * submenu.getElementsByTagName("a").length);
	var mainInstance = this;
	var intId = setInterval(function() {
		var curHeight = submenu.offsetHeight;
		var newHeight = curHeight - moveBy;
		if (newHeight > minHeight)
			submenu.style.height = newHeight + "px";
		else {
			clearInterval(intId);
			submenu.style.height = "";
			submenu.className = "collapsed";
			mainInstance.memorize();
		}
	}, 30);
};
SDMenu.prototype.collapseOthers = function(submenu) {
	if (this.oneSmOnly) {
		for (var i = 0; i < this.submenus.length; i++)
			if (this.submenus[i] != submenu && this.submenus[i].className != "collapsed")
				this.collapseMenu(this.submenus[i]);
	}
};
SDMenu.prototype.expandAll = function() {
	var oldOneSmOnly = this.oneSmOnly;
	this.oneSmOnly = false;
	for (var i = 0; i < this.submenus.length; i++)
		if (this.submenus[i].className == "collapsed")
			this.expandMenu(this.submenus[i]);
	this.oneSmOnly = oldOneSmOnly;
};
SDMenu.prototype.collapseAll = function() {
	for (var i = 0; i < this.submenus.length; i++)
		if (this.submenus[i].className != "collapsed")
			this.collapseMenu(this.submenus[i]);
};
SDMenu.prototype.memorize = function() {
	if (this.remember) {
		var states = new Array();
		for (var i = 0; i < this.submenus.length; i++)
			states.push(this.submenus[i].className == "collapsed" ? 0 : 1);
		var d = new Date();
		d.setTime(d.getTime() + (30 * 24 * 60 * 60 * 1000));
		document.cookie = "sdmenu_" + encodeURIComponent(this.menu.id) + "=" + states.join("") + "; expires=" + d.toGMTString() + "; path=/";
	}
};

EL CSS

Código:

div.sdmenu1 {
	width: 160px;
	font-family: Arial, sans-serif;
	font-size: 12px;
	padding-bottom: 10px;
	background: url(bottom.gif) no-repeat  right bottom;
	color: #00CC66;
}
div.sdmenu1 div {
	background: url(title.gif);
	overflow: hidden;
}

div.sdmenu1 div:first-child {
	background: url(toptitle.gif) no-repeat;
}
div.sdmenu1 div.collapsed {
	height: 25px;
}
div.sdmenu1 div span {
	display: block;
	padding: 5px 25px;
	font-weight: bold;
	color: #FFFFFF;
	background: url(expanded.gif) no-repeat 10px center;
	cursor: default;
	border-bottom-width: 1px;
	border-bottom-style: solid;
}
div.sdmenu1 div.collapsed span {
	background-image: url(collapsed.gif);
}

div.sdmenu1 div a {
	padding: 5px 10px;
	background: #eee;
	display: block;
	border-bottom: 1px solid #ddd;
	color: #666666;
}
div.sdmenu1 div a.current {
	background : #ccc;
}
div.sdmenu1 div a:hover {
	text-decoration: none;
	background-color: #FF9900;
	background-image: url(linkarrow.gif);
	background-repeat: no-repeat;
	background-position: right center;
	font-weight: bold;
	color: #FFFFFF;
}
div.sdmenu {
	width: 160px;
	font-family: Arial, sans-serif;
	font-size: 12px;
	padding-bottom: 10px;
	background: url(bottom.gif) no-repeat  right bottom;
	color: #00CC66;
}
div.sdmenu div {
	background: url(title1.gif);
	overflow: hidden;
}

div.sdmenu div:first-child {
	background: url(toptitle.gif) no-repeat;
}
div.sdmenu div.collapsed {
	height: 25px;
}
div.sdmenu div span {
	display: block;
	padding: 5px 25px;
	font-weight: bold;
	color: #FFFFFF;
	background: url(expanded.gif) no-repeat 10px center;
	cursor: default;
	border-bottom-width: 1px;
	border-bottom-style: solid;
}
div.sdmenu div.collapsed span {
	background-image: url(collapsed.gif);
}

div.sdmenu div a {
	padding: 5px 10px;
	background: #eee;
	display: block;
	border-bottom: 1px solid #ddd;
	color: #666666;
}
div.sdmenu div a.current {
	background : #ccc;
}
div.sdmenu div a:hover {
	text-decoration: none;
	background-color: #FF9900;
	background-image: url(linkarrow.gif);
	background-repeat: no-repeat;
	background-position: right center;
	font-weight: bold;
	color: #FFFFFF;
}

[quimfv]

Has visto esto?


PureCSSMenu.com

Quim

[perris]

Que pena, pero no es lo que yo preguntaba, ya que el menu ya lo tengo hecho.
lo que quiero es un codigo que me ayude a cerrar automaticamente el submenu antes visitado y que no me deje todo el menu abierto. No se si me hago entender.

[Adler]

Hola

Prueba con esto a modo de ejemplo

Código javascript:

<html>
<style type="text/css">
.oculto {display:none}
</style>
<script type="text/javascript">
var visto_subm = null;
var visto_color = null;
function ver(num) {
objhl = document.getElementById(num);
obj = document.getElementById("sub"+num);
 
obj.style.display = (obj==visto_subm) ? 'none' : 'block';
objhl.style.color = (objhl==visto_color) ? 'black' : 'red';
 
    if ((visto_subm != null) && (visto_color != null)) {
        visto_subm.style.display = 'none';
        visto_color.style.color = 'black';
    }
//alert (visto_subm + " - " + visto_color)
//alert (obj + " - " + objhl)
visto_subm = (obj==visto_subm) ? null : obj;
visto_color = (obj==visto_color) ? null : objhl;
}
 
 
function ver1(num)
{
var t=setTimeout("ver("+num+")",1000) // Tarda 1 segundo en aparecer
}
 
function ver2(num)
{
var id = setInterval("ver("+num+")",1000); // Tarda 1 segundo en aparecer y parpadea durante 15 segundos
setTimeout("clearInterval("+id+")",15000);
}
 
</script>
<head>
</head>
<body>
Se puede usar ver, ver1 y ver2 por separado<br /><br />
<div id="0" onclick="ver(this.id)" style="z-index:1;">MENU0</div>
<div id="sub0" class="oculto" style="z-index:1;">
SubMenu0<br />
SubMenu0<br />
SubMenu0
</div>
 
<div id="1" onclick="ver(this.id)" style="z-index:1;">MENU1</div>
<div id="sub1" class="oculto" style="z-index:1;">
SubMenu1<br />
SubMenu1<br />
SubMenu1
</div>
 
 
<div id="2" onclick="ver(this.id)" style="z-index:1;">MENU2</div>
<div id="sub2" class="oculto" style="z-index:1;">
SubMenu2<br />
SubMenu2<br />
SubMenu2
</div>
 
 
<div id="3" onclick="ver(this.id)" style="z-index:1;">MENU3</div>
<div id="sub3" class="oculto" style="z-index:1;">
SubMenu3<br />
SubMenu3<br />
SubMenu3
</div>
 
</body>
</html>
 

Suerte

[perris]

Gracias Adler, exelente su aporte, ya me funciono.

[perris]

Adler o cualquier forero que me pueda ayudar estoy usando el codigo que me dejo Adler pero surgio una nueva necesidad y es un nuevo nivel dentro del submenu como lo muestro abajo. Como hago para hacer esto. GRACIAS

MENU1
---submenu1.1
-----sub1.1.1
-----sub1.1.2
-----sub1.1.3
---submenu1.2
-----sub1.2.1
-----sub1.2.2
-----sub1.2.3
MENU2

[Adler]

Hola

La manera mas sencilla es duplicar la función. Claro está cambiando los nombres de las var y de la función

Suerte

[perris]

Si señor asi era muchas gracias....